// JavaScript Document

OpenLayers.Control.TableroContainer = 
  OpenLayers.Class(OpenLayers.Control, {

	/** 
     * Property: containerDiv
     * {DOMElement} 
     */
    containerDiv: null,	
	lateralIzqDiv: null,
	lateralDerDiv: null,
	
	/** 
     * Property: isVisible
     * {boolean} 
     */
    isVisible: true,
	
	/** 
     * Property: content
     * {DOMElement} 
     */
    content: null,
	
	/** 
     * SIZE AND POSITIONS of CONTAINER
     */
	width: '100%',
	height: '250px',
	mapHeight: null,
	
    initialize: function(options) {
        OpenLayers.Control.prototype.initialize.apply(this, arguments);
    },
	
	 /**
     * Method: draw
     *
     * Returns:
     * {DOMElement} 
     */  
    draw: function() {
        OpenLayers.Control.prototype.draw.apply(this);

        // create layout divs
        this.loadContents();  

        return this.div;
    },
	
	/** 
     * Method: ignoreEvent
     * 
     * Parameters:
     * evt - {Event} 
     */
    ignoreEvent: function(evt) {
        OpenLayers.Event.stop(evt);
    },
	
	/** 
     * Method: mouseDown
     *
     * Parameters:
     * evt - {Event}
     */
    mouseDown: function(evt) {
        this.isMouseDown = true;
        this.ignoreEvent(evt);
    },

    /** 
     * Method: mouseUp
     *  
     * Parameters:
     * evt - {Event} 
     */
    mouseUp: function(evt) {
        if (this.isMouseDown) {
            this.isMouseDown = false;
            this.ignoreEvent(evt);
        }
    },

	 /** 
     * Method: loadContents
     *
     */
    loadContents: function() {
		this.mapHeight = this.map.div.style.height;
        //configure main div		
		this.div.id = this.id + "_monitorDiv";
		this.div.className = "Tablero";
		with (this.div.style){
        	position = "absolute";
			width = this.width;
			height = this.height;
		    top = parseInt(this.mapHeight)-parseInt(this.height)+'px';
	        display = (this.isVisible)?"block":"none";
		}
		   
        //OpenLayers.Event.observe(this.div, "mouseup", OpenLayers.Function.bindAsEventListener(this.mouseUp, this));
        //OpenLayers.Event.observe(this.div, "click", this.ignoreEvent);
        //OpenLayers.Event.observe(this.div, "mousedown", OpenLayers.Function.bindAsEventListener(this.mouseDown, this));
        //OpenLayers.Event.observe(this.div, "dblclick", this.ignoreEvent);
				
		var tableroContainer = document.createElement("div"); // header contenedor del titulo y del close button
		tableroContainer.className = "TableroContainer";
		with (tableroContainer.style){
			height = this.height;
		}
		
		var tableContent = document.createElement("table"); 
		var TBODY = document.createElement('tbody');
		tableContent.width = "100%";
		tableContent.border = 0;
		tableContent.cellSpacing = 0;
		tableContent.cellPadding = 0;
		
		var tr = document.createElement("tr"); 
		var tdIZQ = document.createElement("td"); 
		var tdCentro = document.createElement("td");
		tdCentro.width = "680px";
		var tdDER = document.createElement("td");
	
		var headerCont = document.createElement("div"); // header contenedor del titulo y del close button
		headerCont.className = "TableroContainer-header";
		
		//close button
  		var closeDiv = document.createElement("div");
		closeDiv.className = "TableroContainer-button-div";
		var closeSpan = document.createElement("span");
		closeSpan.className = "TableroContainer-button";
		closeSpan.title = "Cerrar el tablero";
		closeSpan.innerHTML = "[x]&nbsp;";
		closeSpan.style.cursor = "pointer";
  		closeDiv.appendChild(closeSpan);
		OpenLayers.Event.observe(closeDiv, "click", 
			OpenLayers.Function.bindAsEventListener(this.hide, this));
  		headerCont.appendChild(closeDiv);
				
  		this.div.appendChild(headerCont);
		
		var lateralWidth = Math.abs(Math.round((parseInt(this.map.div.scrollWidth)-680)/2));
		
		this.lateralIzqDiv = document.createElement("div");
		this.lateralIzqDiv.className = "TableroLateral";
		with (this.lateralIzqDiv.style){
			width = lateralWidth+'px';
			height = this.height;
		}
		tdIZQ.appendChild(this.lateralIzqDiv);
		
		this.lateralDerDiv = document.createElement("div");
		this.lateralDerDiv.className = "TableroLateral";
		with (this.lateralDerDiv.style){
			width = lateralWidth+'px';
			height = this.height;
		}
		tdDER.appendChild(this.lateralDerDiv);

		var generalContent = document.createElement("div"); //contenedor general div
		generalContent.className = "TableroContainer-container";
		generalContent.style.height = "100%";
  		generalContent.style.overflow = "hidden";
		
		if (this.content!=null){
			this.content.style.display = 'block';
			generalContent.appendChild(this.content);		
		}		
  		
		tableroContainer.appendChild(generalContent);
		tdCentro.appendChild(tableroContainer);

		tr.appendChild(tdIZQ);
		tr.appendChild(tdCentro);
		tr.appendChild(tdDER);
		TBODY.appendChild(tr);
		tableContent.appendChild(TBODY);
		this.div.appendChild(tableContent);
	
	},
	
	/** 
     * Method: redraw
     *
     */
    redraw: function() {
		//this.mapHeight = this.map.div.style.height;
		this.mapHeight = $j('#gMapMainContent').height()-60;
		
		var myNewTop = parseInt(this.mapHeight) - parseInt(this.height);
		this.div.style.top = myNewTop+'px';		
		//var lateralWidth = Math.abs(Math.round((parseInt(this.map.div.scrollWidth)-680)/2));
		var lateralWidth = Math.abs(Math.round((parseInt( $j('#gMapMainContent').width())-680)/2));
		this.lateralIzqDiv.style.width = lateralWidth+'px';
		this.lateralDerDiv.style.width = lateralWidth+'px';
	},
		
	 /** 
     * Method: addContent
	 * Agrega un elemento HTML al contenido, lo renombra y lo elimina del documento (solo queda ligado a este Monitor)
     *  
     * Parameters:
     * divId - {String}
     */
	addContent: function(divId) {
		var elem = document.getElementById(divId);
		//elem.parentNode.removeChild(elem);
		this.content = elem;	 
	},
	
	/** 
     * Method: hideContainer
     * Oculta el contenedor colapsable
     * 
     */
	hide: function(){
		this.isVisible = false;
		this.div.style.display = "none";  
	},
	
	/** 
     * Method: showContainer
     * Muestra el contenedor colapsable
     * 
     */
	show: function(){
		this.isVisible = true;
		this.div.style.display = "block";
	},

	/** 
     * Method: changeVisibility
     * Oculta o muestra el contenedor colapsable, dependiendo del estado actual
     * 
     */
	changeVisibility: function(){
		(this.isVisible)?this.hide():this.show();
	},
		
	CLASS_NAME: "OpenLayers.Control.TableroContainer"

});